{% extends 'base.html' %}
{% load static %}

{% block title %}{{ title }} - 维修管理系统{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">{{ title }}</h4>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        
                        {% if form.non_field_errors %}
                        <div class="alert alert-danger">
                            {% for error in form.non_field_errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                        {% endif %}

                        <!-- 标题 -->
                        <div class="mb-3">
                            <label for="{{ form.title.id_for_label }}" class="form-label">{{ form.title.label }}</label>
                            {{ form.title }}
                            {% if form.title.errors %}
                            <div class="text-danger">
                                {% for error in form.title.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>

                        <!-- 内容 -->
                        <div class="mb-3">
                            <label for="{{ form.content.id_for_label }}" class="form-label">{{ form.content.label }}</label>
                            {{ form.content }}
                            {% if form.content.errors %}
                            <div class="text-danger">
                                {% for error in form.content.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>

                        <!-- 目标角色 -->
                        <div class="mb-3">
                            <label class="form-label">{{ form.target_roles.label }}</label>
                            <div class="row">
                                {% for choice in form.target_roles.field.choices %}
                                <div class="col-md-4 mb-2">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               name="target_roles" value="{{ choice.0 }}"
                                               id="target_roles_{{ choice.0 }}"
                                               {% if choice.0 in form.target_roles.value %}checked{% endif %}>
                                        <label class="form-check-label" for="target_roles_{{ choice.0 }}">
                                            {{ choice.1 }}
                                        </label>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                            {% if form.target_roles.errors %}
                            <div class="text-danger">
                                {% for error in form.target_roles.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>

                        <!-- 优先级 -->
                        <div class="mb-3">
                            <label for="{{ form.priority.id_for_label }}" class="form-label">{{ form.priority.label }}</label>
                            {{ form.priority }}
                            {% if form.priority.errors %}
                            <div class="text-danger">
                                {% for error in form.priority.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>

                        <!-- 开始时间 -->
                        <div class="mb-3">
                            <label for="{{ form.start_date.id_for_label }}" class="form-label">{{ form.start_date.label }}</label>
                            {{ form.start_date }}
                            {% if form.start_date.errors %}
                            <div class="text-danger">
                                {% for error in form.start_date.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>

                        <!-- 结束时间 -->
                        <div class="mb-3">
                            <label for="{{ form.end_date.id_for_label }}" class="form-label">{{ form.end_date.label }}</label>
                            {{ form.end_date }}
                            {% if form.end_date.errors %}
                            <div class="text-danger">
                                {% for error in form.end_date.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>

                        <!-- 是否激活 -->
                        <div class="mb-3">
                            <div class="form-check form-switch">
                                {{ form.is_active }}
                                <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                    {{ form.is_active.label }}
                                </label>
                            </div>
                            {% if form.is_active.errors %}
                            <div class="text-danger">
                                {% for error in form.is_active.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>

                        <div class="d-grid gap-2 d-md-flex">
                            <button type="submit" class="btn btn-primary me-md-2">
                                <i class="bi bi-check-circle"></i> 保存
                            </button>
                            <a href="{% url 'notifications:notification_list' %}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> 返回列表
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 时间选择器初始化
    const startDateInput = document.getElementById('{{ form.start_date.id_for_label }}');
    const endDateInput = document.getElementById('{{ form.end_date.id_for_label }}');
    
    if (startDateInput && endDateInput) {
        startDateInput.addEventListener('change', function() {
            const startDate = new Date(this.value);
            const endDate = new Date(endDateInput.value);
            
            if (endDate < startDate) {
                // 如果结束时间早于开始时间，自动设置为开始时间后1小时
                const newEndDate = new Date(startDate.getTime() + 60 * 60 * 1000);
                endDateInput.value = newEndDate.toISOString().slice(0, 16);
            }
        });
    }
});
</script>
{% endblock %}
